<template>
  <ContainerGroup>
    <Container style="margin-bottom: 10px">
      <FilterForm
        ref="filterForm"
        :elements="filterElements"
        @submit="handleSearch"
        @reset="handlerReset"
      >
        <Button
          type="info"
          :loading="dcLoading"
          icon="export"
          @click="handleExport"
        >导出</Button>
      </FilterForm>
    </Container>
    <Container height="fill" display="flexY">
      <OperationContainer>
        <span>项目负责人：{{ projectLeader }}</span>
      </OperationContainer>
      <div class="table-box">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          border
          :header-cell-style="{
            background: '#fafafa',
            borderColor: '#e7ecf8',
            color: '#555555',
            textAlign: 'center'
          }"

          header-row-class-name="ck-table-header"
          row-class-name="ck-table-row"
          size="small"
          height="100%"
          style="width: 100%"
        >
          <el-table-column label="财务编码" prop="financialCode" width="90" />
          <el-table-column label="项目编码" prop="projectCode" width="120" />
          <el-table-column label="项目简称|全称" prop="easyProName" width="350">
            <template #default="{ row }">
              <div>
                <el-tooltip class="item" effect="dark" :content="row.proAllName" placement="bottom-start">
                  <el-link type="primary">
                    <span
                      @click="handleSzmx(row)"
                    >{{ row.easyProName }}
                    </span></el-link>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="完成进度" prop="proFinishPer" align="center">
            <template #default="{ row }">
              <el-progress type="circle" :percentage="row.proFinishPer" :width="50" />
            </template>
          </el-table-column>
          <el-table-column label="期初金额(元)" prop="startMoney" width="150" align="right">
            <template #default="{ row }">{{
              row.startMoney | numberToCurrency
            }}</template>
          </el-table-column>
          <el-table-column label="是否封存" prop="isClose" width="80" align="center">
            <template #default="{ row }">{{
              row.isClose === 0 ? '否' : '是'
            }}</template>
          </el-table-column>
          <el-table-column label="收入(元)">
            <el-table-column label="拨入收入" prop="dialInMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.dialInMoney | numberToCurrency
              }}</template>
            </el-table-column>
            <el-table-column label="配套收入" prop="completeInMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.completeInMoney | numberToCurrency
              }}</template>
            </el-table-column>
            <el-table-column label="收入总额" prop="sumInMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.sumInMoney | numberToCurrency
              }}</template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="支出(元)">
            <el-table-column label="拨入支出" prop="dialOutMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.dialOutMoney | numberToCurrency
              }}</template>
            </el-table-column>
            <el-table-column label="配套支出" prop="completeOutMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.completeOutMoney | numberToCurrency
              }}</template>
            </el-table-column>
            <el-table-column label="支出总额" prop="sumOutMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.sumOutMoney | numberToCurrency
              }}</template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="余额(元)">
            <el-table-column label="拨入余额" prop="dialLeftMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.dialLeftMoney | numberToCurrency
              }}</template>
            </el-table-column>
            <el-table-column label="配套余额" prop="completeLeftMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.completeLeftMoney | numberToCurrency
              }}</template>
            </el-table-column>
            <el-table-column label="期末余额" prop="sumLeftMoney" width="150" align="right">
              <template #default="{ row }">{{
                row.sumLeftMoney | numberToCurrency
              }}</template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="pagenation-box">
          <el-pagination
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 收支明细-->
      <Drawer
        title="项目收支明细"
        :visible="isShow"
        :header-color="'#e7ecf8'"
        width="90%"
        :footer-btns="[
          {
            text: '返回',
            type: 'info',
            trigger: 'cancel'
          }
        ]"
        @cancel="isShow = false"
      >
        <SalaryPayDetails
          v-if="isShow"
          :page-type="2"
          :table-api="sApi"
          :xpt-api="xptApi"
          :current-row="currentRow"
          :time="time"
        />
      </Drawer>
    </Container>
  </ContainerGroup>
</template>
<script>
import SalaryPayDetails from '@/specialFunds/projectArchives/salaryPayDetails'
import {
  XmcxqueryForPage,
  queryAllProjectXmcxDetailDown,
  queryAllProjectXmcxDetailOn,
  downloadAllXmcxDetailProject,
  xmcxdownloadAllProject
} from '@/apis/specialFunds/systermSetting'
export default {
  name: 'ProjectArchives', // 项目档案
  components: {
    SalaryPayDetails
  },
  data() {
    return {
      xptApi: downloadAllXmcxDetailProject,
      sApi: [queryAllProjectXmcxDetailDown, queryAllProjectXmcxDetailOn],
      isShow: false,
      dcLoading: false,
      filterElements: [
        {
          key: 'yearMonth',
          label: '时间',
          mode: 'monthrange',
          type: 'date-picker',
          format: 'yyyy-MM',
          value: ['2019-01', this.$util.currentDate(0)],
          defaultValue: ['2019-01', this.$util.currentDate(0)],
          width: 340
        },
        {
          key: 'financialCode',
          type: 'input',
          label: '财务编码',
          value: ''
        },
        {
          key: 'projectCode',
          type: 'input',
          label: '项目编号',
          value: ''
        },
        {
          key: 'selectAll',
          type: 'input',
          label: '综合搜索',
          placeholder: '项目简称/项目全称',
          value: '',
          width: 180
        },
        {
          key: 'isClose',
          type: 'Select',
          label: '封存状态',
          value: '',
          options: [
            {
              label: '未封存',
              value: 0
            },
            {
              label: '已封存',
              value: 1
            }
          ],
          filterable: true,
          clearable: true
        }
      ],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      projectLeader: '',
      deptName: '',
      time: []
    }
  },
  created() {},
  methods: {
    handleSzmx(row) {
      this.time = [this.$refs.filterForm.getParms()?.yearMonth[0], this.$refs.filterForm.getParms()?.yearMonth[1]]
      console.log(this.time)
      this.currentRow = row
      this.isShow = true
    },
    handleExport() {
      // 导出
      const param = {
        financialCode: this.$refs.filterForm.getParms()?.financialCode,
        projectCode: this.$refs.filterForm.getParms()?.projectCode,
        selectAll: this.$refs.filterForm.getParms()?.selectAll,
        isClose: this.$refs.filterForm.getParms()?.isClose,
        startTime: this.$refs.filterForm.getParms()?.yearMonth[0] + '-01',
        endTime: this.$refs.filterForm.getParms()?.yearMonth[1] + '-01',
        isAll:false
      }
      this.dcLoading = true
      xmcxdownloadAllProject(param).then((res) => {
        this.dcLoading = false
        const blob = new Blob([res.data], {
          type: res.data.type + 'charset=utf-8'
        })
        const downloadLink = document.createElement('a')
        const URL = window.URL || window.webkitURL || window.moxURL
        const downUrl = URL.createObjectURL(blob)
        downloadLink.href = downUrl
        downloadLink.download = '项目查询.xlsx'
        downloadLink.click()
        window.URL.revokeObjectURL(downUrl)
        // document.body.removeChild(downloadLink) // 删除 a 标签
      })
    },
    handleSearch(value) {
      this.newCondition = value
      this.currentPage = 1
      this.getData(value)
    },
    getData() {
      const params = {
        financialCode: this.newCondition?.financialCode,
        projectCode: this.newCondition?.projectCode,
        selectAll: this.newCondition?.selectAll,
        isClose: this.newCondition?.isClose,
        startTime: this.newCondition?.yearMonth[0] + '-01',
        endTime: this.newCondition?.yearMonth[1] + '-01',
        isAll:false,
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      this.tableLoading = true
      XmcxqueryForPage(params)
        .then((res) => {
          this.tableLoading = false
          if (res.data.code === 200) {
            this.tableData = res.data.data.zxProjectSelectVOPageInfo.list
            const { userName, deptName } = res.data.data
            this.projectLeader = userName
            this.deptName = deptName
            this.total = res.data.data.zxProjectSelectVOPageInfo.total
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    handlerReset(val) {},
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
.table-box {
  padding: 14px 10px 14px 10px;
  height: calc(100% - 78px);
  box-sizing: border-box;
}
.pagenation-box {
  display: flex;
  padding-top: 2px;
  justify-content: flex-end;
}
.text-btn {
  color: #2165f9;
  border-bottom: 1px solid #2165f9;
  display: inline-block !important;
  cursor: pointer;
}
</style>
